<template>
  <div class="app-container">
    <!-- 车辆通行明细 -->
    <div>
      <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
        <el-form-item label="车牌号:" v-show="isFalse1">
          <el-input style="width:2.2rem" v-model="searchModel.plateNumber" placeholder=""></el-input>
        </el-form-item>
        <el-form-item style="margin-left:20px" label="通行门禁:">
          <el-input style="width:2.2rem" v-model="searchModel.accessName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item style="margin-left:20px" label="通行时间:">
          <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>
          <el-button style="margin-left:25px" type="primary" @click="handleDownload">查询</el-button>
          <el-button style="margin-left:10px" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading='listLoading' :data='list' element-loading-text='Loading' border fit
        highlight-current-row>
        <el-table-column align='center' label='序号'>
          <template slot-scope='scope'>
            {{ scope.$index + 1 + pageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column label='车牌号' align='center'>
          <template slot-scope='scope'>
            <el-link type="primary" @click='handleEdit(scope.$index, scope.row)'>{{ scope.row.plateNumber }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label='车辆类型'  align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.carCategory == 1 ? "小车" : "大车" }}</span>
          </template>
        </el-table-column>
        <el-table-column label='车牌类别'  align='center'>
          <template slot-scope='scope'>
            {{ scope.row.carType == 1 ? "固定车" : "临时车" }}
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at1' label='通行门禁' >
          <template slot-scope='scope'>
            <span>{{ scope.row.accessName }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name='status-col' label='通行方向'  align='center'>
          <template slot-scope='scope'>
            <el-tag>{{ scope.row.direction == 1 ? "进场" : "出场" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at' label='通行方式' >
          <template slot-scope='scope'>
            <span>{{ scope.row.tongxfs }}</span>
          </template>
        </el-table-column>

        <el-table-column align='center' prop='created_at' label='通行时间'>
          <template slot-scope='scope'>
            <i class='el-icon-time' />
            <span>{{ scope.row.creationTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at2' label='操作'>
          <template slot-scope='scope'>
            <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:15px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
          layout="prev, pager,next,sizes,jumper" :total="total">
        </el-pagination>
      </div>
      <el-dialog :visible.sync="dialogFormVisible" width="700px">
        <div slot="title" class="custom-box-title">
          <span> 车辆通行详情</span>
          <el-divider ></el-divider>
        </div>
        <el-form :label-width="labelWidth" :model="dialogModel" :inline="true">
          <el-form-item label="" prop="cheph">
            <span class="form-span-title">{{ "车牌号:" }}</span>
            <span class="form-span-value">{{ dialogModel.plateNumber }}</span>
          </el-form-item>
          <el-form-item label="" prop="chepType">
            <span class="form-span-title">{{ "车辆类型:" }}</span>
            <span class="form-span-value">{{ dialogModel.carType == 1 ? "小车" : "大车" }}</span>
          </el-form-item>
          <el-form-item label="" prop="chepType1">
            <span class="form-span-title">{{ "车辆类别:" }}</span>
            <span class="form-span-value">{{ dialogModel.carCategory == 1 ? "固定车" : "临时车" }}</span>
          </el-form-item>
        </el-form>
        <el-form :label-width="labelWidth" :model="dialogModel" :inline="true">
          <el-form-item label="" prop="tongxmenj">
            <span class="form-span-title">{{ "通行门禁:" }}</span>
            <span class="form-span-value">{{ dialogModel.accessName }}</span>
          </el-form-item>
          <el-form-item label="" prop="fangx">
            <span class="form-span-title">{{ "通行方向:" }}</span>
            <span class="form-span-value">{{ dialogModel.direction == 1 ? "进场" : "出场" }}</span>
          </el-form-item>
          <el-form-item label="" prop="tongxsj">
            <span class="form-span-title">{{ "通行时间:" }}</span>
            <span class="form-span-value">{{ dialogModel.tongxsj }}</span>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getApiThroughPageList } from "@/api/ThroughRecord";
import { getApiThroughRecordData } from "@/api/ThroughRecord";
import { parseTime } from "@/utils";

export default {
  name: "accessDetails",
  props: ['isFalse', 'plateNumber'],
  data() {
    return {
      isFalse1: this.isFalse,
      listLoading: false,
      searchModel: {
        plateNumber: "",
        accessName: ""
      },
      dialogModel: {},
      labelWidth: "80px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      value2: '',
      dialogFormVisible: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      types: [
        {
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 2,
          label: '禁用'
        },],
      list: [],
    }
  },
  watch: {
    isFalse(newVal) {
      this.isFalse1 = newVal;
    }
  },
  created() {
    if (typeof this.isFalse1 === 'undefined') {
      this.isFalse1 = true;
    }
    if (typeof this.plateNumber === 'undefined') {
      this.searchModel.plateNumber = "";
    } else {
      this.searchModel.plateNumber = this.plateNumber;
    }
    this.getApiThroughData();
  },

  methods: {
    getApiThroughData() {
      let data = {
        skipCount:  ((this.currentPage <= 1 ? 1 : this.currentPage) - 1) * this.pageSize,
        MaxResultCount: this.pageSize,
      };
      if (this.searchModel.plateNumber.length != 0) {
        data.PlateNumber = this.searchModel.plateNumber;
      }
      if (this.searchModel.accessName.length != 0) {
        data.accessName = this.searchModel.accessName;
      }
      getApiThroughPageList(data).then(res => {
        if (res == null) return this.$vux.toast.text(res.message);
        else {
          this.total = res.totalCount;
          this.list = res.items;
          this.list.forEach(element => {
            element.creationTime = parseTime(new Date(element.creationTime), '{y}-{m}-{d} {h}:{i}:{s}');
          });
        }
      });
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      this.getApiThroughData();
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.getApiThroughData();
    },
    handleDownload() {
      this.getApiThroughData();
    },
    handleEdit(id, checkList) {
      getApiThroughRecordData(checkList.id).then(res => {
        if (res == null) return this.$vux.toast.text(res.message);
        else {
          this.dialogFormVisible = true;
          this.dialogModel = res;
        }
      });
    },
    resetSearch() {
      this.searchModel = {
        plateNumber: "",
        accessName: ""
      }
      this.value2 = "";
    },
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

#selectForm>>>.el-form-item__label {
  font-size: 13px;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  margin-left: .6rem;
  margin-top: .4rem;

  .custom-box-title {
    font-size: 24px;
  }
}

.form-span-title {
  font-size: 20px;
  margin-left: 28px;
}

.form-span-value {
  font-size: 20px;
  margin-left: 10px;
}

.block {
  margin-left: 20px;
  margin-right: .2rem;
  display: flex;
  justify-content: flex-end;
}

.move-right {
  margin-left: .5rem;
}
</style>
